<template>
  <h2>响应式</h2>
  <!-- 组合式api在template里面几乎没有任何区别 -->
  <span>{{ state.count }}</span>
  <button @click="add">+</button>

  <hr />

  <span>{{ name }}</span>
  <button @click="change">btn</button>
</template>

<script>
// 里面解构的几乎都是函数
// reactive用于创建响应式数据
// ref也是用于创建响应式数据
import { reactive, ref } from "vue";

export default {
  setup() {
    // 一般情况下使用ref比较多，在表单里面使用reactive比较多(一个表单需要绑定很多个变量)

    // 如果希望一次性定义多个变量，建议使用reactive
    const state = reactive({
      count: 10,
      age: 20,
    });
    const add = () => {
      state.count++;
    };

    // 如果希望一个一个定义变量，建议使用ref
    const name = ref("zhangsan");
    const change = () => {
      name.value = "lisi";
    };

    return { state, add, name, change };
  },
};
</script>
